<template>
  <div class="common-card lost-card" style="display: flex;flex-direction: column;justify-content: space-between">
    <div class="flex-center">
      <el-image style="height: 200px" :src="props?.lostFoundItem?.defaultPicture"></el-image>
    </div>
    <div style="padding: 10px" class="flex-between">
      <el-tag :type="getTagType()" v-if="props?.lostFoundItem?.emergencyLevel">{{props?.lostFoundItem?.emergencyLevel}}</el-tag>
      <el-text v-if="props.type==='found'">{{$formatTimeAgo(props?.lostFoundItem?.foundTime)}}</el-text>
      <el-text v-if="props.type==='lost'">{{$formatTimeAgo(props?.lostFoundItem?.lostTime)}}</el-text>
    </div>
    <div style="padding: 0 10px">
      <p style="font-size: 20px" class="link-text">{{ props?.lostFoundItem?.title }}</p>
      <el-text size="small">{{ props?.lostFoundItem?.description }}</el-text>
    </div>
    <div class="flex-between" style="padding: 10px">
      <el-space>
        <el-icon>
          <Location/>
        </el-icon>
        <el-text>{{ props?.lostFoundItem?.location }}</el-text>
      </el-space>
      <el-space>
        <el-button text v-if="props.canEdit" @click="edit" type="danger">编辑</el-button>
        <el-button text @click="detail" type="primary">详情</el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, defineProps,defineEmits} from "vue";

const emit = defineEmits(['detail','edit'])
let props = defineProps({
  lostFoundItem: {
    type: Object,
    default: () => {
    }
  },
  type: {
    type: String,
    default: "lost"
  },
  canEdit: {
    type: Boolean,
    default: false
  }
})

let edit=()=>{
  if (props.type==='lost') emit('edit',props.lostFoundItem.lostItemId)
  else if (props.type==='found') emit('detail',props.lostFoundItem.foundItemId)
}
let detail=()=>{
  if (props.type === "lost"){
    emit('detail', props.lostFoundItem.lostItemId)
  }else if (props.type === "found"){
    emit('detail', props.lostFoundItem.foundItemId)
  }
}
let getTagType=()=>{
  if (props?.lostFoundItem?.emergencyLevel){
    switch (props?.lostFoundItem?.emergencyLevel){
      case "一般":
        return "success"
      case "紧急":
        return "danger"
    }
  }
}
</script>

<style scoped>

</style>
